html,
body,
* {
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 750px) {
  .app {
    padding: 4vw;

    .logo {
      width: 21vw;
      margin: 0 0 5vw;
    }

    .bg {
      width: 92vw;
    }

    .info {
      margin-top: -4vw;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      min-height: 9.6vw;
      padding: 1vw 0;
      box-shadow: 0 .8vw 1.9vw 0 rgba(65, 63, 144, 0.09);
      border-radius: 0 0 1.8vw 1.8vw;
      font-size: 2.9vw;
      color: #6F7594;

      &::before,
      &::after {
        content: '·';
        color: #F8AD6A;
        font-weight: bold;
        font-size: 4vw;
        padding: 0 1.5vw;
      }
    }

    .btns {
      margin-top: 6vw;
      display: flex;
      justify-content: space-between;

      a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 43.6vw;
        height: 10.7vw;
        background: #EB8E3D;
        border-radius: 5.3vw;
        font-size: 3.2vw;
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        color: #FFFFFF;
        overflow: hidden;

        img {
          height: 8.9vw;
          margin-top: 1.8vw;
          margin-right: 1vw;
        }
      }
    }

    .result {
      margin-top: 6vw;

      .panel {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 12.4vw;
        background: linear-gradient(20deg, #FFC76D, #FDAB61);
        border-radius: 1.8vw 1.8vw 0 0;
        font-size: 4.1vw;
        font-weight: bold;
        color: #FEFEFE;
      }

      .content {
        background: #FFFFFF;
        box-shadow: 0 1.7vw 5.1vw 0 rgba(65, 63, 144, 0.16);
        border-radius: 0 0 1.8vw 1.8vw;
        padding: 4vw 3.6vw;

        .ico {
          width: 4vw;
          margin-right: 1.3vw;
        }

        h5 {
          display: flex;
          align-items: center;
          font-size: 3.4vw;
          font-weight: bold;
          color: #19213C;
        }

        .require {
          ul {
            list-style: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column-gap: 6.6vw;
            padding-top: 2.5vw;

            li {
              display: flex;
              align-items: center;
              position: relative;
              height: 6.5vw;
              background: #F4F4F4;
              border-radius: 1vw;
              margin-bottom: 2.4vw;
              font-size: 3vw;
              font-family: AlibabaPuHuiTiL;
              font-weight: 400;
              color: #19213C;

              span {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 5.5vw;
                height: 6.5vw;
                background: #EB8E3D;
                border-radius: 1vw 0 0 1vw;
                margin-right: 2.3vw;
                font-size: 4.1vw;
                font-family: AlibabaPuHuiTiB;
                font-weight: 500;
                font-style: italic;
                color: #FFFFFF;
              }
            }
          }
        }

        .error {
          margin-top: 4vw;

          ul {
            list-style: none;
            padding-top: 2.5vw;

            li {
              display: flex;
              align-items: center;
              position: relative;
              overflow: hidden;
              background: #F4F4F4;
              border-radius: 1vw;
              margin-bottom: 2.4vw;
              padding: 2.8vw;
              font-size: 3vw;
              font-family: AlibabaPuHuiTiL;
              font-weight: 400;
              color: #19213C;
              line-height: 3.6vw;

              &::before {
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                bottom: 0;
                width: 1.1vw;
                height: 100%;
                background: #EB8E3D;
                border-radius: 1vw 0 0 1vw;
              }

              .spelling {
                font-style: normal;
                color: #FF4455;
              }

              .grammar {
                font-style: normal;
                color: #EB8E3E;
              }
            }
          }
        }
      }
    }

    .info-message {
      margin-top: 5vw;
      height: 60vw;
      background: #FFFFFF;
      box-shadow: 0 1vw 3vw 0 rgba(65, 63, 144, 0.16);
      border-radius: 1vw;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .result-ico {
        height: 11vw;
      }

      .text {
        margin-top: 3vw;
        font-size: 2.3vw;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        color: #19213C;
        line-height: 4.5vw;
      }

      .bar {
        margin-top: 3vw;
        width: 40vw;
        height: 1vw;
        background: #EAEAEA;
        border-radius: .5vw;
        overflow: hidden;

        .progress {
          height: 1vw;
          background: #EB8E3E;
          border-radius: .5vw;
        }
      }
    }
  }

  .template {
    width: 78vw;

    h5 {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 11vw;
      background: #FDAB61;
      font-size: 4.4vw;
      font-family: AlibabaPuHuiTiM;
      font-weight: bold;
      color: #FFFFFF;
    }

    ul {
      list-style: none;
      padding: 6.7vw 12vw;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-row-gap: 4vw;

      li {
        display: flex;
        align-items: center;
        font-size: 4vw;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        color: #19213C;
        line-height: 4.4vw;

        &::before {
          content: '';
          display: inline-block;
          width: 3vw;
          height: 3vw;
          border: 2px solid #FFFFFF;
          border-radius: 50%;
          margin-right: 8px;
        }

        &.checked::before {
          background: #EB8E3D;
        }
      }
    }

    .options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 5.4vw 5.8vw;

      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30vw;
        height: 10vw;
        cursor: pointer;
        background: #FFFFFF;
        border-radius: 5px;
        font-size: 3.7vw;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        color: #000000;
      }
    }
  }
}

@media screen and (min-width: 750px) {
  .app {
    padding: 50px;
    width: 750px;
    margin: 0 auto;

    .logo {
      width: 165px;
      margin: 0 0 40px;
    }

    .bg {
      width: 100%;
    }

    .info {
      margin-top: -40px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      min-height: 66px;
      padding: 20px 0 10px;
      box-shadow: 0 5px 11px 0 rgba(65, 63, 144, 0.09);
      border-radius: 0px 0px 10px 10px;
      font-size: 16px;
      color: #6F7594;

      &::before,
      &::after {
        content: '·';
        color: #F8AD6A;
        font-weight: bold;
        font-size: 28px;
        padding: 0 15px;
      }
    }

    .btns {
      margin-top: 40px;
      padding: 0 30px;
      display: flex;
      justify-content: space-between;
      :hover {
        cursor: pointer;
      }

      a {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 290px;
        height: 60px;
        background: #EB8E3D;
        border-radius: 30px;
        font-size: 18px;
        font-family: AlibabaPuHuiTiM;
        font-weight: 500;
        color: #FFFFFF;
        overflow: hidden;

        img {
          height: 47px;
          margin-top: 13px;
          margin-right: 15px;
        }
      }
    }

    .result {
      margin-top: 40px;

      .panel {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 64px;
        background: linear-gradient(20deg, #FFC76D, #FDAB61);
        border-radius: 8px 8px 0 0;
        font-size: 24px;
        font-weight: bold;
        color: #FEFEFE;
      }

      .content {
        display: flex;
        background: #FFFFFF;
        box-shadow: 0px 7px 22px 0px rgba(65, 63, 144, 0.16);
        border-radius: 0 0 8px 8px;
        padding: 34px;

        .ico {
          width: 20px;
          margin-right: 7px;
        }

        h5 {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: bold;
          color: #19213C;
        }

        .require {
          flex: 1;

          ul {
            list-style: none;
            padding-top: 24px;

            li {
              display: flex;
              align-items: center;
              position: relative;
              height: 34px;
              background: #F4F4F4;
              border-radius: 4px;
              margin-bottom: 12px;
              font-size: 16px;
              font-family: AlibabaPuHuiTiL;
              font-weight: 400;
              color: #19213C;

              span {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 34px;
                background: #EB8E3D;
                border-radius: 4px 0 0 4px;
                margin-right: 12px;
                font-size: 21px;
                font-family: AlibabaPuHuiTiB;
                font-weight: 500;
                font-style: italic;
                color: #FFFFFF;
              }
            }
          }
        }

        .error {
          margin-left: 60px;
          flex: 1;

          ul {
            list-style: none;
            padding-top: 24px;

            li {
              display: flex;
              align-items: center;
              position: relative;
              overflow: hidden;
              background: #F4F4F4;
              border-radius: 4px;
              margin-bottom: 12px;
              padding: 16px;
              font-size: 16px;
              font-family: AlibabaPuHuiTiL;
              font-weight: 400;
              color: #19213C;
              line-height: 20px;

              &::before {
                position: absolute;
                content: '';
                left: 0;
                top: 0;
                bottom: 0;
                width: 6px;
                height: 100%;
                background: #EB8E3D;
                border-radius: 4px 0 0 4px;
              }

              .spelling {
                font-style: normal;
                color: #FF4455;
              }

              .grammar {
                font-style: normal;
                color: #EB8E3E;
              }
            }
          }
        }
      }
    }

    .info-message {
      margin-top: 40px;
      height: 400px;
      background: #FFFFFF;
      box-shadow: 0px 7px 22px 0px rgba(65, 63, 144, 0.16);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .result-ico {
        height: 85px;
      }

      .text {
        margin-top: 24px;
        font-size: 16px;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        color: #19213C;
        line-height: 34px;
      }

      .bar {
        margin-top: 24px;
        width: 240px;
        height: 10px;
        background: #EAEAEA;
        border-radius: 5px;
        overflow: hidden;

        .progress {
          height: 10px;
          background: #EB8E3E;
          border-radius: 5px;
        }
      }
    }
  }

  .template {
    width: 400px;

    h5 {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50px;
      background: #FDAB61;
      font-size: 18px;
      font-family: AlibabaPuHuiTiM;
      font-weight: bold;
      color: #FFFFFF;
    }

    ul {
      list-style: none;
      padding: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;

      li {
        display: flex;
        align-items: center;
        font-size: 16px;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        color: #19213C;
        line-height: 32px;

        &::before {
          content: '';
          display: inline-block;
          width: 15px;
          height: 15px;
          border: 2px solid #FFFFFF;
          border-radius: 50%;
          margin-right: 8px;
        }

        &.checked::before {
          background: #EB8E3D;
        }
      }
    }

    .options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;

      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 36px;
        cursor: pointer;
        background: #FFFFFF;
        border-radius: 5px;
        font-size: 14px;
        font-family: AlibabaPuHuiTiR;
        font-weight: 400;
        color: #000000;
      }
    }
  }
}
